<template>
	<view style="padding-top: 80rpx;"> <!-- 添加适当的 padding-top 来容纳导航条 -->
		<!-- 引入 nav-bar 组件，并传递页面标题 -->
		<back-bar :backTitle="backTitle"></back-bar> <!-- 使用 backTitle 传递标题 -->
		
		<view class="box">
			<picker mode="selector" :range="array" :value="index" @change="bindPickerChange">
				<view class="picker">
					{{ array[index] }}
				</view>
			</picker>
			<text @tap="goSetting">发票抬头</text>
		</view>

		<!-- 滚动容器 -->
		<view class="scroll-container">
			<view class="box1">
				<checkbox-group @change="handleCheck">
					<view class="list" v-for="(item, index) in items" :key="index">
						<view class="left">
							<view class="img">
								<image src="/static/images/item17.png" mode="" />
							</view>
							<view class="text">
								<view class="p1">{{item.createdAt}}</view>
								<view class="p2">
									<view>￥{{item.amount}}</view>
									<view>
										<image src="/static/images/wx.png" mode="" />
										<image src="/static/images/zfb.png" mode="" />
									</view>
								</view>
								<view class="p3">交易单号：{{item.payOrderId}}</view>
							</view>
						</view>
						<view class="right">
							<checkbox :value="item.value" :checked="item.checked"  @change="handleSingleCheckChange(item, $event)"></checkbox>
						</view>
					</view>
				</checkbox-group>
			</view>
		</view>

		<view>
			<uni-section title="图标样式" subTitle="使用 show-icon 属性显示图标按钮" type="line" padding>
				<uni-pagination :show-icon="true" :total="total" title="标题文字" :pageSize="pageSize" @change="handlePageChange"/>
			</uni-section>
		</view>
		<view class="bottom">
			<view class="p1">
				<view :class="{ selected: selectedOption === '未开票' }" @tap="selectOption('未开票')">未开票</view>
				<view :class="{ selected: selectedOption === '已开票' }" @tap="selectOption('已开票')">已开票</view>
			</view>
			<view class="p2">
				<view class="left">
					<view @tap="selectAll">
						<view v-show="!allChecked">
							本页全选
						</view>
						<view v-show="allChecked">
							未开全选
						</view>
					</view>
					<!-- <view>未开全选</view> -->
				</view>
				<view class="button">提交开票</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	const $http = app.globalData.$http;
	var config = require('../../utils/config.js');
	export default {
		data() {
			return {
				picUrl: config.Config,
				array: ['全部订单', '水费', '电费', '物业费', '租金', '停车充值', '罚款'],
				index: 0,
				allCheck: '',
				isCheck1: '',
				isCheck2: '',
				isCheck3: '',
				selectedOption: '',
				allChecked: false, // 用于跟踪“本页全选”的状态
				items: [],
				// 分页
				currentPage: 1,
				pageSize: 5, 
				total: 0, 
				// 设置页面标题
				backTitle: '电子发票'
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.getList();
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage() {},
		methods: {
			
			// 处理分页器页码变化
			handlePageChange(e) {
				this.currentPage = e.current;
				this.getList();
			},
			getList() {
				const params = {
					"pageNum": this.currentPage,
					"pageSize": this.pageSize
				};								
				$http.paymentList(params).then((res) => {
					if (res.code == 200) {
						console.log('获取订单信息：', res.data.total);
						this.items = res.data.records;
						this.total = res.data.total;
					} else {
						console.error('请求失败，错误码：', res.code);
					}
				}).catch((error) => {
					console.error('请求发生错误：', error);
				});

			
			//     let token = uni.getStorageSync('token');
			//     let header = {
			//         'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
			//         Authorization: token
			//     };
			    
			//     let params = {
			//         "pageNum": this.currentPage,
			//         "pageSize": this.pageSize
			//     };    
			
			//     uni.request({
			//         url: 'https://erp.tuocaiyun.com/prod-api/third/jiquan/UnifiedOrder/list',
			//         method: 'POST',
			//         data: Object.assign({}, params),
			//         header: header,
			//         success: (res) => {  // 使用箭头函数
			//             console.log(res.data);
			//             //请求成功
			//             if (res.data.code == 200) {
			//                 console.log('1:',res.data.data.records);
			//                 this.items = res.data.data.records;
			//                 this.total = res.data.data.total;
			//                 console.log('打印:',this.items);
			//             } else if (res.data.code == 401) {
			//                 console.log('2');
			//             } else {
			//                 console.log('3');
			//             }
			//         }
			//     });
			},
			
			back() {
				console.log('返回上个页面',getCurrentPages());
				uni.navigateBack({
					delta: 1
				})
			},
						
			selectOption(option) {
			  this.selectedOption = option; // 更新选中的选项
			  // 这里可以添加其他逻辑，比如根据选项筛选数据等
			},
			// 全选
			selectAll() {
			  this.allChecked = !this.allChecked;
			  this.items.forEach(item => {
				item.checked = this.allChecked;
			  });
			  // 如果使用了v-model绑定checkbox-group，可能需要手动触发change事件来更新绑定值
			  this.$emit('update:checkedItems', this.items.filter(item => item.checked).map(item => item.id));
			},
			
			handleSingleCheckChange(item, event) {
				// 修正拼写错误
				console.log('点击了复选框'); 
				item.checked = event.detail.value.includes(item.id);
				// 更新allChecked状态，如果所有项都被选中，则allChecked为true，否则为false（除非手动全选）
				this.allChecked = this.items.every(i => i.checked);
				// 同样，可能需要手动触发change事件来更新绑定值（如果使用v-model）
			},
				
			// 处理选择变化
			bindPickerChange: function(e) {
				// 修正 this.setData 为直接赋值
				this.index = e.detail.value; 
			},

			handleCheckAll(event) {
				// 修正 this.setData 为直接赋值
				this.allCheck = !this.allCheck;
				this.isCheck1 = !this.allCheck;
				this.isCheck2 = !this.allCheck;
				this.isCheck3 = !this.allCheck;
			},

			goSetting: function() {
				if (uni.getStorageSync('token') == '') {
					uni.showToast({
						title: '您还未登录，请先登录',
						icon: 'none'
					});
					setTimeout(function() {
						uni.reLaunch({
							url: '/pages/login/index'
						});
					}, 1200);
				} else {
					uni.navigateTo({
						url: '/pages/fapiao-setting/index'
					});
				}
			},

			handleCheck() {
				console.log('占位：函数 handleCheck 未声明');
				// 选中一条数据
			}
		}
	};
</script>
<style lang="scss">
	.box {
		width: 700rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// font-size: 32rpx;
		color: #323232;
		margin-top: 80rpx;
		margin-bottom:10rpx;
	}

	.box1 {
		width: 700rpx;
		margin: 0 auto;
	}

	.list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border: 1px solid rgba(255, 110, 0, 0.54);
		border-radius: 5px;
		padding: 20rpx;
		width: 100%;
		box-sizing: border-box;
		margin-top: 20rpx;
	}

	.list .left {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
	}

	.list .left .img {
		width: 60rpx;
		height: 60rpx;
		margin-right: 10rpx;
	}

	.list .left .img image {
		width: 60rpx;
		height: 60rpx;
	}

	.list .left .text image {
		width: 30rpx;
		height: 30rpx;
	}

	.list .left .text .p1 {
		font-size: 24rpx;
		font-weight: 400;
		color: rgb(68, 68, 68);
	}

	.list .left .text .p2 {
		font-size: 48rpx;
		font-weight: 700;
		color: rgb(68, 68, 68);
		margin: 10rpx auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.list .left .text .p2 image {
		margin-left: 20rpx;
	}

	.list .left .text .p3 {
		font-size: 24rpx;
		font-weight: 400;
		color: rgb(68, 68, 68);
	}

	checkbox .wx-checkbox-input {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 3rpx solid rgba(255, 110, 0, 0.55);
	}

	checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		border: none;
		background: rgb(255, 110, 0);
	}

	checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		border-radius: 50%;
		text-align: center;
		font-size: 32rpx;
		color: #fff;
		background: transparent;
		transform: translate(-50%, -50%) scale(1);
	}

	.bottom {
		// position: fixed;
		bottom: 0;
		width: 200rpx;
		padding: 20rpx;
		width: 100%;
		box-sizing: border-box;
		background: #fff;
	}

	.bottom .p1 {
		display: flex;
		justify-content: flex-end;
		color: rgb(166, 166, 166);
	}

	.bottom .p1 view {
		border: 1px solid rgb(166, 166, 166);
		width: 110rpx;
		height: 48rpx;
		text-align: center;
		margin-left: 10rpx;
		font-size: 35rpx;
		
	}
	
	.selected {
	  color: #ff6e00;/* 选中时的背景颜色 */
	  border: 1px solid rgb(255, 110, 0) !important;
	}

	.bottom .p2 {
		display: flex;
		justify-content: space-between;
		margin-top: 10rpx;
	}

	.bottom .p2 .left {
		display: flex;
	}

	.bottom .p2 .left view {
		margin-left: 10rpx;
		color: #ff6e00;
		font-size: 38rpx;
	}

	.bottom .p2 .button {
		border-radius: 6rpx;
		background: rgb(254, 114, 92);
		width: 200rpx;
		height: 68rpx;
		line-height: 68rpx;
		text-align: center;
		color: #fff;
		font-size: 35rpx;
	}

	/* 滚动容器样式 */
	.scroll-container {
		/* 设置合适的高度，可根据实际情况调整 */
		height: 900rpx; 
		overflow-y: auto;
	}
</style>